<template>
    <div>
        <el-dialog title="流程表单设计" :visible.sync="dialogVisible" width="50%" style="overflow-y: auto" :fullscreen="true" :destroy-on-close="true" v-loading="dataLoad" 
        element-loading-text="加载中">
            <el-row :gutter="0">
                <el-col :span="11" :offset="1">
                    <h2>已有表单项</h2>
                    <el-table ref="dataTableRef" v-if="showTable" :data="tableData" border stripe 
                        style="margin-bottom: 20px;height:200px;overflow: auto;">
                        <el-table-column v-for="col in columns" :prop="col.id" :key="col.id" :label="col.label">
                        </el-table-column>
                        <el-table-column label="多选" width="50px">
                            <template slot-scope="scope">
                                {{ scope.row.many == '1' ? '是' : '否' }}
                            </template>

                        </el-table-column>
                        <el-table-column label="操作" width="250px">
                            <template slot-scope="scope">
                                <tableEditDelete :scope="scope" @editHandle="editHandleClick"
                                    @deleteHandle="deleteHandleClick">
                                </tableEditDelete>
                            </template>

                        </el-table-column>
                    </el-table>


                    <h2>{{ formMode == '0' ? '新增' : '修改' }}</h2>
                    <el-form :model="form" ref="form" label-width="120px" :inline="false" size="normal" >
                        <el-form-item label="描述" size="normal">
                            <el-input v-model="form.name" placeholder="" size="normal" clearable></el-input>
                        </el-form-item>

                        <el-form-item label="类型" size="normal">
                            <dic-select ref="formTypeRef" v-model="form.type" typeCode="WorkflowFormValueType"
                                placeholder="请选择值类型" @change="typeChange"></dic-select>
                        </el-form-item>

                        <el-form-item label="字典选择" size="normal" v-if="form.type == '2'">
                            <el-select v-model="form.url" placeholder="请选择字典" clearable filterable class="select100">
                                <el-option v-for="item in options.dic" :key="item.value" :label="item.name"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="系统接口" size="normal" v-if="form.type == '3'">
                            <dic-select v-model="form.url" typeCode="SystemAPIList" placeholder="请选择系统接口"></dic-select>
                        </el-form-item>

                        <el-form-item label="接口地址" size="normal" v-if="form.type == '4'">
                            <el-input v-model="form.url" placeholder="请输入接口地址,仅支持下拉" size="normal" clearable></el-input>
                        </el-form-item>

                        <el-form-item label="返回数据格式" size="normal" v-if="form.type == '4'">
                            <el-input v-model="form.format" placeholder="例如result.data则输入data，如果是直接返回数组则为空" size="normal"
                                clearable></el-input>
                        </el-form-item>

                        <el-form-item label="数据展示值" size="normal" v-if="form.type == '4'">
                            <el-input v-model="form.key" placeholder="请输入数据展示值" size="normal" clearable></el-input>
                        </el-form-item>

                        <el-form-item label="数据实际值" size="normal" v-if="form.type == '4'">
                            <el-input v-model="form.value" placeholder="请输入数据实际值" size="normal" clearable></el-input>
                        </el-form-item>

                        <el-form-item label="是否多选" size="normal"
                            v-if="form.type != '1' && form.type != '0' && form.type != ''">
                            <el-radio v-model="form.many" label="1">是</el-radio>
                            <el-radio v-model="form.many" label="0">否</el-radio>
                        </el-form-item>


                        <el-form-item>
                            <el-button type="primary" @click="save">添 加</el-button>
                            <el-button v-if="formMode == '1'" @click="cancelUpdate">取 消</el-button>

                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="8" :offset="3">
                    <el-card shadow="always" :body-style="{ padding: '20px' }" style="margin-bottom: 20px;">
                        <div slot="header" class="clearfix">
                            <span>表单预览</span>
                            <el-button style="float: right; padding: 3px 0" type="text"></el-button>
                        </div>
                        <el-form label-width="80px" :inline="false" size="normal">
                            <el-form-item :label="item.name" v-for="item in tableData" :key="item.name">
                                <el-input disabled placeholder="" size="normal" v-if="item.type == '0'"></el-input>

                                <el-input disabled placeholder="" size="normal" type="textarea" v-if="item.type == '1'"
                                    :autosize="{ minRows: 4 }"></el-input>

                                <el-select placeholder="请选择" clearable filterable disabled v-if="Number(item.type) > 1"
                                    class="select100">

                                </el-select>
                            </el-form-item>
                        </el-form>
                    </el-card>
                    <el-button type="primary" @click="submit">保 存</el-button>
                </el-col>
            </el-row>

        </el-dialog>
    </div>
</template>

<script>
import dicSelect from "@/components/dicSelectSingle.vue"
import tableEditDelete from "@/components/tableEditDelete.vue"
import { getListForSelect } from "@/api/system/dictionary";
import GUID from "@/utils/guid"
import { insertFormDesign,getFormItems } from "@/api/workFlowTemplate/workFlowTemplate"

// 流程表单设计
export default {
    components: {
        dicSelect,
        tableEditDelete
    },
    props:{
        value:Boolean,
        workFlowId:String,
    },
    created(){
        this.getWorkFlowFormItems()
    },
    data() {
        return {
            dialogVisible: this.value,
            tableData: [],
            dataLoad:true,
            form: {
                id: '',
                name: '',
                type: '0',
                typeText: '',
                url: '',
                key: '',
                value: '',
                format: '',
                many: '0'
            },
            formMode: '0',
            columns: [
                {
                    id: 'name',
                    label: '名称'
                }, {
                    id: 'typeText',
                    label: '类型'
                }
            ],
            formyPreview: [

            ],
            options: {
                dicBaseUrl: process.env.VUE_APP_BASE_API + "dictionary/",
                dic: [],
                systemApi: []
            },
            showTable: true
        }
    },
    watch:{
        dialogVisible(val){
            this.$emit('input',val)
        },
        value(val){
            this.dialogVisible = val
        }
    },
    methods: {
        async typeChange(val) {
            this.form.url = ''
            if (val > 1) {
                switch (val) {
                    case '2':
                        var res = await getListForSelect()
                        if (res.code == 10000) {
                            this.options.dic = res.data
                        }
                        break
                    case '3':
                        break
                    case '4':
                        break
                }
            }
        },
        save() {
            this.form.typeText = this.$refs.formTypeRef.getLabel()

            if (this.formMode == '0') {
                this.tableData.push({
                    id: GUID.newGuid(),
                    name: this.form.name,
                    type: this.form.type,
                    typeText: this.form.typeText,
                    url: this.form.url,
                    key: this.form.key,
                    value: this.form.value,
                    format: this.form.format,
                    many: this.form.many
                })
            }
            else {
                for (let index = 0; index < this.tableData.length; index++) {
                    let item = this.tableData[index];
                    if (item.id == this.form.id) {
                        this.tableData[index] = {
                            id: this.form.id,
                            name: this.form.name,
                            type: this.form.type,
                            typeText: this.form.typeText,
                            url: this.form.url,
                            key: this.form.key,
                            value: this.form.value,
                            format: this.form.format,
                            many: this.form.many
                        }
                        break
                    }
                }
                this.formMode = '0'
                this.refreshTable();
            }
            this.$message({
                message: "添加成功！",
                type: 'success'
            })
            this.form = {
                id: '',
                name: '',
                type: '0',
                typeText: '',
                url: '',
                key: '',
                value: '',
                format: '',
                many: '0'
            }
        },
        editHandleClick(row) {
            this.formMode = '1'
            this.form = {
                id: row.id,
                name: row.name,
                type: row.type,
                typeText: row.typeText,
                url: row.url,
                key: row.key,
                value: row.value,
                format: row.format,
                many: row.many
            }
        },
        deleteHandleClick(row) {
            this.tableData = this.tableData.filter(r => r.id != row.id)
        },
        cancelUpdate() {
            this.formMode = '0'
            this.form = {
                id: '',
                name: '',
                type: '0',
                typeText: '',
                url: '',
                key: '',
                value: '',
                format: '',
                many: '0'
            }
        },
        refreshTable() {
            this.showTable = false
            this.$nextTick(() => {
                this.showTable = true
            })
        },
        async getWorkFlowFormItems(){
            let res = await getFormItems(this.workFlowId)
            if(res.code==10000){
                this.tableData = res.data
            }
            this.dataLoad = false
        },
        async submit(){
            let res = await insertFormDesign({
                workFlowId:this.workFlowId,
                FormItems:this.tableData
            })
            if(res.code==10000){
                this.$message({
                    type:'success',
                    message:'保存成功！'
                })
                this.dialogVisible = false
            }else{
                this.$message({
                    type:'error',
                    message:res.msg
                })
            }
        }
    }
}
</script>

<style scoped></style>